<template>
  <workspace-layout left-drawer>
    <template v-slot:header-title>
      <span>个人空间</span>
    </template>

    <template v-slot:page>
      <div style="margin: 0 auto;" class="overflow-hidden topic">
        <div class="q-mx-md q-pa-none">
          <h1 class="text-h5">热门专题</h1>
          <section class="text-subtitle2">专题下包含一组精心准备的网站、工具与应用。关注您最喜欢的专题，每次访问时都会收到有关专题更新的通知。</section>
        </div>
        <div class="row q-mt-lg q-mx-md q-pa-none bg-gray">
          <div class="inline-block" style="border-radius: 4px">
            <q-input outlined filled style="width: 320px;"
                     v-model="keywords"
                     label="输入关键字"
                     @keydown.enter="handleSearch">
              <template v-slot:prepend>
                <q-btn round dense flat icon="search" class="q-mr-sm" @click="handleSearch"/>
              </template>
            </q-input>
          </div>
          <q-space></q-space>
          <div class="inline-block">
            <q-select outlined filled
                      v-model="orderBy" :options="orderOptions">
              <template v-slot:prepend>
                <q-avatar icon="sort"></q-avatar>
              </template>
            </q-select>
          </div>
        </div>

        <div class="q-mt-md">
          <q-card class="cursor-pointer q-mb-lg" @click="clickTopic(topic)" flat
                  v-for="topic in topics" :key="topic._id" :label="topic.name">
            <q-card-section horizontal class="row">

              <q-avatar class="q-ml-md" rounded
                        :color="['primary','secondary','amber','green','red'][Math.floor(Math.random()*5)]"
                        size="80px" style="border-radius: 4px"
                        text-color="white">{{ topic.name[0] }}
              </q-avatar>

              <q-card-section class="q-ml-sm q-mt-none q-pa-none col">
                <div class="text-subtitle1 text-bold">{{ topic.name }}</div>
                <div class="text-subtitle2 ellipsis-2-lines">{{ topic.description }}</div>
                <div>程序员</div>
              </q-card-section>

              <q-card-section class="q-my-auto q-mr-md q-pa-none">
                <div style="border: 1px solid #d9e1ec">
                  <q-btn stack flat class="q-my-auto"
                         style="font-size: 16px;width: 72px;height: 40px; color:#424242;"
                         label="关注"
                         @click.stop="handleTopicFollow(topic)"
                         :disable="topic.isFollow"
                  />
                </div>
                <q-tooltip v-if="topic.isLike" content-class="bg-indigo" :offset="[10, 10]">已经点赞过咯</q-tooltip>
              </q-card-section>
            </q-card-section>
          </q-card>
        </div>
      </div>
    </template>

    <!--用户侧边栏-->
    <template v-slot:left-drawer>
      <user-panel></user-panel>
    </template>

  </workspace-layout>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import iTool from 'src/api/tool'
import WorkspaceLayout from 'layouts/WorkspaceLayout.vue'
import UserPanel from 'pages/user/UserPanel.vue'

interface Topic {
  // 基础信息
  _id: string, // ID

  name: string, // 名称
  description: string, // 介绍

  // 专题包含标签
  tags: string[], // 专题包含一级标签

  isFollow: boolean,

  // 数据信息
  createdAt: Date, // 创建时间
  updatedAt: Date, // 更新时间
}

export default defineComponent({
  name: 'Topic',
  components: {
    WorkspaceLayout,
    UserPanel
  },
  data (): {
    topics: Topic[],
    topicName: string,
    keywords: string,
    orderBy: string,
    orderOptions: string[],
  } {
    return {
      topics: [],
      topicName: '',
      keywords: '',
      orderBy: '最新发布',
      orderOptions: [
        '最新发布', '点赞最多', '热度趋势'
      ]
    }
  },
  async mounted () {
    this.topics = await iTool.findAllTopic({ query: { status: 1 } }) as Topic[]
  },
  methods: {
    async clickTopic (topic: { name: string, tags: { _id: string }[] }) {
      await this.$router.push({
        name: 'AppIndex',
        params: {
          index: 'topic'
        },
        query: {
          name: topic.name,
          ids: topic.tags.map((e) => e._id).join(',')
        }
      })
    },
    handleSearch () {
      // ...
    },
    handleTopicFollow (topic: Topic) {
      // ...
      topic.isFollow = true
    }
  }
})
</script>

<style lang="scss">
.topic {
  width: 1160px;
  margin: 0 auto;
}
</style>
